<template>
  <div>
    <el-form :model="loudongForm">
      <el-form-item label="添加楼栋数量">
        <el-input style="width: 300px" v-model.number="loudongForm.loudong" v-on:input="inputLoudong"></el-input>
      </el-form-item>
    </el-form>

    <div>
      <el-form :inline="true" v-for="(item,index) in loudongArr">
        {{'第'+(index+1)+'栋'}}
        <el-form-item label="楼栋名">
          <el-input v-model="item.name" v-on:input="loudongName($event,index)" placeholder="请填写楼栋名"></el-input>
        </el-form-item>
        <el-form-item label="楼栋数">
          <el-input v-model="item.height" v-on:input="loudongItemFuc($event,index)" placeholder="请填写楼栋层数"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="loudongItemDel(index)">删除</el-button>
        </el-form-item>

        <el-row>
          <el-col :span="6"><div align="center" class="grid-content bg-purple">所在楼层</div></el-col>
          <el-col :span="6"><div align="center" class="grid-content bg-purple-light">房间数量</div></el-col>
          <el-col :span="6"><div align="center" class="grid-content bg-purple">
            批量设置为
            <el-radio v-model="radioZu" value="1">已租</el-radio>
            <el-radio v-model="radioZu" value="2">未租</el-radio>
          </div></el-col>
          <el-col :span="6"><div align="center" class="grid-content bg-purple-light"><el-button>匹配房型</el-button></div></el-col>
        </el-row>


        <div class="row m-t-20" v-for="(item1,index1) in item.louceng">
          <div class="col-md-2">
            <button type="button" class="btn btn-warning" @click="loucengDel(index,index1)">删除</button>
            <input type="text" maxlength="2" class="form-control m-l-10 wd50" readonly v-model="item1.loucengNum">
          </div>
          <div class="col-md-2">
            <input type="text" maxlength="2" class="form-control m-l-10 wd50" placeholder="" v-model="item1.roomNum" v-on:input="loucengItemFuc($event,index,index1)">
          </div>
          <div class="col-md-8" >
            <div class="loucengItem" v-for="(item2,index2) in item1.roomArr">
              <div  class="btn btn-default" v-text="item2.num"></div>
              <div :class="item2.chuzu ? 'btn btn-success chuzuStatus' : 'btn btn-default chuzuStatus' " v-text="item2.chuzu?'已租':'未租'" @click="changeStatus(index,index1,index2)"></div>
              <span class="del" @click="roomDel(index,index1,index2)">-</span>
            </div>
          </div>
        </div>
      </el-form>

    </div>


    <div id="app">
      <form class="form-inline m-t-20 p-l-20">
        <div class="form-group m-r-10 ">
          <label for="exampleInputName2" class="m-r-10">*添加楼栋数量</label>
          <input type="text" maxlength="2" class="form-control m-l-10" v-model="loudong" v-on:input ="inputLoudong($event)" placeholder="请填写数字">
        </div>
      </form>
      <div id="content" style="display:none;">
        <form class="form-inline m-t-20 p-l-20 col-md-10 m-b-50" v-for="(item,index) in loudongArr">
          <div class="form-group m-r-10">
            <label for="exampleInputName2" class="m-r-10">第{{item.loudongNum}}栋</label>
            <label for="exampleInputName2" class="m-r-10">*楼栋名</label>
            <input type="text" class="form-control" v-model="item.name" v-on:input="loudongName($event,index)" placeholder="请填写楼栋名" maxlength="20">&nbsp;&nbsp;
            <label for="exampleInputName2">*共</label>
            <input type="text" maxlength="2" class="form-control" v-model="item.height" v-on:input ="loudongItemFuc($event,index)" placeholder="请填写楼栋层数">
            <label for="exampleInputName2" class="m-r-10">层</label>
          </div>
          <button type="button" class="btn btn-warning" @click="loudongItemDel(index)">删除</button>
          <div class="row m-t-20 title">
            <div class="col-md-2" style="text-align: center;">
              所在楼层
            </div>
            <div class="col-md-2">
              房间数量
            </div>
            <div class="col-md-8">
              <span class="m-r-10">批量设置为</span>
              <label class="radio-inline">
                <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2" @click="setStauts(2,index)"> 已租
              </label>
              <label class="radio-inline">
                <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" @click="setStauts(1,index)" checked> 未租
              </label>
              <button type="button" class="btn btn-info pull-right" style="padding: 1px 12px;" @click="mateRoom(index)">匹配房型</button>
            </div>
            <div class="mateModal panel panel-default" v-show="mateModalIndex==index">
              <div class="panel-heading">
                配置房型
                <button type="button" class="close" aria-label="Close" @click='mateModalIndex= "-1"'><span aria-hidden="true">&times;</span></button>
              </div>
              <div class="panel-body">
                <div>选择房型</div>
                <div class="m-t-20">
                  <button v-for="(item,index) in mateTypeArr" type="button" :class="mateTypeIndex == index ? 'btn btn-warning m-r-10' : 'btn m-r-10'" @click="mateTypeIndex = index" v-text="item.name"></button>
                </div>
                <div class="m-t-20 typeContent">
                  <div v-for="(item3,index3) in item.louceng" class="typeItem clearFix" v-show="item3.roomArr.length>0">
                    <div class="typeleft pull-left">
                      <span>{{item3.loucengNum}}层</span>
                      <span>{{item3.roomNum}}间</span><br>
                      <span style="cursor: pointer;" @click="typeSelectedAll(index,index3)">全选</span>
                    </div>
                    <div class="typeright pull-left">
                      <div v-for="(item4,index4) in item3.roomArr" class="pull-left typerightItem" @click="typeSelected(index,index3,index4)">
                        <span v-text="item4.num"></span><br>
                        <span :class="item4.typeName == '未设置' ? '': 'lv'" v-text="item4.typeName"></span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="panel-heading" style="text-align: center;">
                <button type="button" class="btn btn-primary m-r-10" @click='mateModalIndex= "-1"'>保存</button>
                <button type="button" class="btn btn-default" @click='mateModalIndex= "-1"'>关闭</button>
              </div>
            </div>
          </div>

<!--          <div class="row m-t-20" v-for="(item1,index1) in item.louceng">-->
<!--            <div class="col-md-2">-->
<!--              <button type="button" class="btn btn-warning" @click="loucengDel(index,index1)">删除</button>-->
<!--              <input type="text" maxlength="2" class="form-control m-l-10 wd50" readonly v-model="item1.loucengNum">-->
<!--            </div>-->
<!--            <div class="col-md-2">-->
<!--              <input type="text" maxlength="2" class="form-control m-l-10 wd50" placeholder="" v-model="item1.roomNum" v-on:input="loucengItemFuc($event,index,index1)">-->
<!--            </div>-->
<!--            <div class="col-md-8" >-->
<!--              <div class="loucengItem" v-for="(item2,index2) in item1.roomArr">-->
<!--                <div  class="btn btn-default" v-text="item2.num"></div>-->
<!--                <div :class="item2.chuzu ? 'btn btn-success chuzuStatus' : 'btn btn-default chuzuStatus' " v-text="item2.chuzu?'已租':'未租'" @click="changeStatus(index,index1,index2)"></div>-->
<!--                <span class="del" @click="roomDel(index,index1,index2)">-</span>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
        </form>
      </div>
      <div class="row col-md-8 m-t-20" style="text-align: center;">
        <button type="button" class="btn btn-primary m-r-10" @click="gotoBeforePage">上一步</button>
        <button type="button" class="btn btn-primary m-r-10" @click="saveRoom">确定</button>
        <button type="button" class="btn btn-default" @click="cancelRoom" >取消</button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "loudong",
  data(){
    return{
      radioZu:'1',
      loudongForm:{},

      //挂载楼栋数量
      loudong: "",
      //挂载匹配房型弹框显示索引,控制让当前点击楼栋弹框显示
      mateModalIndex: "-1",
      //挂载选中风格类型索引
      mateTypeIndex: "0",
      //挂载选中风格数组
      mateTypeArr: [
        /*{id:"dzh",name:"地中海"},
        {id:"ty",name:"田园"},
        {id:"xqx",name:"小清新"}*/
      ],
      //挂载楼栋信息
      loudongArr: [
        /*
      	{
      		name:"",
      		height:"",
				loudongNum:"2",
      		louceng:[
      			{
      				loucengNum:"1",
      				roomNum:"10",
      				roomArr:[
      					{num:"1001",chuzu:false,type:"",typeName:"未设置"},
      					{num:"1002",chuzu:true,type:"",typeName:"未设置"},
      					{num:"1003",chuzu:false,type:"",typeName:"未设置"}
      				]
      			},
      			{
      				loucengNum:"2",
      				roomNum:"10",
      				roomArr:[
      					{num:"1001",chuzu:false,type:"",typeName:"未设置"},
      					{num:"1002",chuzu:true,type:"",typeName:"未设置"},
      					{num:"1003",chuzu:false,type:"",typeName:"未设置"}
      				]
      			}
      		]
      	}
        */],
      typeArr:[]
    }
  },
  methods:{
    inputLoudong(){
      if (isNaN(this.loudongForm.loudong)){
        alert("请输入数字")
        this.loudongForm.loudong=''
        return false;
      }

      var loudongArr = [];
      const houseId = this.$route.query.houseId;
      for(var i=0;i<this.loudongForm.loudong;i++) {
        loudongArr.push({
          houseId:houseId,
          name:"",
          height:"",
          loudongNum:i+1,
          louceng:[]
        })
      }

      this.loudongArr = loudongArr;
    },


    loudongName:function(e,index){
      console.log("e----->>"+e)
      var loudongName = e.target.value;
      var loudongArr = this.loudongArr;
      for(var i =0;i<loudongArr.length;i++){
        if(loudongArr[i].name==loudongName && i!=index){
          alert("楼栋名已经存在");
          this.loudongArr[index].name = "";
          return false;
        }
      }
    },
    getLoudongArrByHouseId:function(houseId){
    },
    getHouseStyleByHouseId:function(houseId){
    },
//     inputLoudong: function(e) {
// //     	console.info(e.target.value,this.loudong)
//       if(isNaN(this.loudong)) {
//         alert("请输入数字");
//         this.loudong = "";
//         return false;
//       }
//       document.getElementById("content").style.display = "block"
//       var num = e.target.value;
//       console.log("e???-->>" + e.target)
// //     		console.info(num)
//       var loudongArr = [];
//       var _houseId = this.getParamater("houseId");
//       console.log(this)
//       console.log(_houseId)
//
//       for(var i=0;i<num;i++) {
//         loudongArr.push({
//           houseId:_houseId,
//           name:"",
//           height:"",
//           loudongNum:i+1,
//           louceng:[]
//         })
//       }
// // 			console.info("loudongArr",loudongArr)
//       this.loudongArr = loudongArr;
//     },

    //生成楼栋楼层函数
    loudongItemFuc: function(e,index) {
      console.log('e type-->'+typeof e)
      console.log('index-->'+index)
      if(isNaN(e)) {
        alert("请输入数字");
        this.loudongArr[index].height = "";
        return false;
      }
      //用户输入的楼层数
      var num = this.loudongArr[index].height;
//     		console.error("用户输入的楼层数",num,"当前楼栋索引",index+1)
      var loudongItemArr = [];
      for(var i=0;i<num;i++) {
        loudongItemArr.push({
          loucengNum:i+1,
          roomNum:"",
          roomArr:[]
        })
      }
      this.loudongArr[index].louceng = loudongItemArr;
      console.log(loudongItemArr)
    },
    //删除楼层函数
    loucengDel: function(index,index1) {
      this.loudongArr[index].louceng.splice(index1,1);
      //用户输入的楼层数
      this.loudongArr[index].height--;
    },
    //删除楼栋函数
    loudongItemDel: function(index){
      this.loudongArr.splice(index,1);
      //用户输入的楼栋数
      this.loudong--;
    },
    //删除房间函数
    roomDel: function(index,index1,index2){
      console.info(index,index1,index2);
      this.loudongArr[index].louceng[index1].roomArr.splice(index2,1);
      //用户输入的房间数
      this.loudongArr[index].louceng[index1].roomNum--;
    },
    //生成楼栋楼层房间函数
    loucengItemFuc: function(e,index,index1) {
      if(isNaN(e.target.value)) {
        alert("请输入数字");
        this.loudongArr[index].louceng[index1].roomNum = "";
        return false;
      }
//     		console.info(index,index1)
      //用户输入的楼层数
      var num = this.loudongArr[index].louceng[index1].roomNum;
      //当前楼层数
      var currentFloor = this.loudongArr[index].louceng[index1].loucengNum;
//     		console.error("用户输入的楼层数",num,"当前楼栋索引",index+1)
      var loucengItemArr = [];
      var houseId = this.getParamater("houseId");
      var premisesName = decodeURI(this.getParamater("premisesName"));
      var flatName = decodeURI(this.getParamater("flatName"));
      var hall=  this.getParamater("hall");
      var room = this.getParamater("room");
      var type = typeArr[0].id;
      var typeName = typeArr[0].name;
      for(var i=0;i<num;i++) {
        var num1 = 0;
        if(i>8){
          num1 = currentFloor+"/"+(i+1);
        }else{
          num1 = currentFloor+"/0"+(i+1);
        }
        //var num1 = currentFloor+"/0"+(i+1);
        loucengItemArr.push({num:num1,chuzu:false,type:type,typeName:typeName,houseId:houseId,premisesName:premisesName,room:room,hall:hall,flatName:flatName})
      }
      this.loudongArr[index].louceng[index1].roomArr = loucengItemArr
    },
    //批量设置状态
    setStauts: function(type,index){
      var loucengNum = JSON.stringify(this.loudongArr[index].louceng);
      var loucengNumResult;
      if(type=="2"){
        loucengNumResult = JSON.parse(loucengNum.replace(/"chuzu":false/g,'"chuzu":true'));
      }else{
        loucengNumResult = JSON.parse(loucengNum.replace(/"chuzu":true/g,'"chuzu":false'));
      }
      this.loudongArr[index].louceng = loucengNumResult;
    },
    //房间切换状态
    changeStatus: function(index,index1,index2) {
      this.loudongArr[index].louceng[index1].roomArr[index2].chuzu = !this.loudongArr[index].louceng[index1].roomArr[index2].chuzu;
    },
    //匹配房型函数
    mateRoom: function(index) {
      this.mateModalIndex = index
      console.info(index)
    },
    //设置房型函数dzh是地中海
    typeSelected: function(index,index3,index4) {
      var num = this.mateTypeIndex;
      if(num != -1) {
        console.info(this.mateTypeArr[num].name,num)
        //挂载选中id
        this.loudongArr[index].louceng[index3].roomArr[index4].type = this.mateTypeArr[num].id;
        //显示选中文字
        this.loudongArr[index].louceng[index3].roomArr[index4].typeName = this.mateTypeArr[num].name;
      }
    },
    //房型全选函数
    typeSelectedAll: function(index,index3) {
      var allRoom = this.loudongArr[index].louceng[index3].roomArr;
      var num = this.mateTypeIndex;
      if(num != -1) {
        for(var i=0;i<allRoom.length;i++) {
          this.loudongArr[index].louceng[index3].roomArr[i].type = this.mateTypeArr[num].id;
          this.loudongArr[index].louceng[index3].roomArr[i].typeName = this.mateTypeArr[num].name;
        }
      }
    },
    gotoBeforePage:function(){
      var premisesName = decodeURI(this.getParamater("premisesName"));
      premisesName =  encodeURIComponent(encodeURIComponent(premisesName));
      window.location.href = localUrl + "modules/permanent/room/centralizedRoom.html?houseId=" + this.getParamater("houseId") + "&premisesName=" + premisesName;
    },
    getParamater: function(name){
      var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
      var r = window.location.search.substr(1).match(reg);
      if(r!=null)return  unescape(r[2]); return null;
    },
    saveRoom: function(){
    },
    cancelRoom: function(){
      window.location.href = '/roomInfo/show';//新增
//    	   var check =  decodeURI(this.getParamater("premisesName"));
//    	   console.log("check:",check);
//       	if (check == null) {
//
//           }else{
//        	   	window.history.go(-2);//修改
//           }

      /* this.loudong = "";
       this.loudongArr=[];*/
      //window.location.href = window.location.href.indexOf("test") != -1 ? "http://changzuadmintest.boyingfintech.com/modules/permanent/room/roomInfoBusiness.html" : "http://huoban.hilianzf.com/modules/permanent/room/roomInfoBusiness.html";
      // window.location.href = "http://localhost:9080/modules/permanent/room/roomInfoBusiness.html";

      //window.location.href= baseURL +"modules/permanent/room/roomInfoBusiness.html";
    },
  },
  created:function(){
    var houseId = this.getParamater("houseId");
    this.getHouseStyleByHouseId(houseId);
    if(houseId != "" && houseId != null && typeof(houseId) != "undefined"){
      this.getLoudongArrByHouseId(houseId);
    }
  },
}
</script>

<style scoped>
.el-row {
  margin-bottom: 20px;
 &:last-child {
   margin-bottom: 0;
 }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>

